$(function () {
    var currentPage = 1; // 记录页数
    var pageSize = 3; // 每页几条数据

    function render() {
        // 1. 渲染列表
        $.ajax({
            type: 'get',
            url: '/product/queryProductDetailList',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (res) {
                console.log(res);
                // 渲染页面
                $('tbody').html(template('tmp', res))
                // 调用分页插件, 渲染数据,生成分页
                setPage(res.total);
            }
        })
    }
    // 调用
    render();

    //2.  调用插件, 这里需要传参
    function setPage(total) {
        // 分页插件
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage,//当前页
            totalPages: Math.ceil(total / pageSize),//总页数
            size: "small",//设置控件的大小，mini, small, normal,large
            onPageClicked: function (event, originalEvent, type, page) {
                //为按钮绑定点击事件 page:当前点击的按钮值
                currentPage = page;
                // 页面重新渲染
                render()
            }
        });
    }

    // 3. 下拉列表填充
    // ajax + 模板引擎
    $.ajax({
        type: 'get',
        url: '/category/querySecondCategoryPaging',
        data: {
            page: 1,
            pageSize: 100
        },
        dataType: 'json',
        success: function (res) {
            console.log(res);
            // 渲染下拉菜单
            $('.cate-one-list').html(template('tmp-two-list', res))
        }
    })

    // 4. 下拉列表选中效果
    // 当点击 下拉列表时
    // 1. 获取当前a标签的文字,设置给按钮的文本
    // 2. 获取当前a标签的id, 设置给隐藏域, 将来传递给后台
    $('.cate-one-list').on('click', 'a', function () {
        // 把按钮的文字,设置成当前点击a的文字,
        // text(), 没有参数是获取, 如果有参数,就是设置
        $('.btn-txt').text($(this).text());
        // 把当前a的id和数据,赋值给了隐藏域了
        $('#brandId').val($(this).data('id'));
        // 当下拉列表选中后,恢复下拉列表的选中状态 
        $('#addform').data('bootstrapValidator').updateStatus('brandId', 'VALID');
    });





    // 5. 上传图片
    // 要求: 
    // 1. 必须上传四张图片,作为商品轮播图
    // 2. 只保留最近上传三张
    // 用数组解决问题: length, 下标

    var picArr = []; // 统计上传成功图片个数和顺序
    // 使用上传图片的插件
    $("#file").fileupload({
        dataType: "json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done: function (e, data) {
            console.log(data.result);
            var img = data.result; // 把地址存储起来

            // 把上传成功的图片添加到picArr中
            // shift();  删除数组的第一个元素
            // unshift(); 在数组前面添加元素
            // push(); 在数组后面添加元素
            // pop(); 删除数组的最后一个元素

            picArr.unshift(img); // 每次都是添加到数组的最前面

            // 图片预览效果
            // before() 在盒子前面添加兄弟元素
            // after() 在盒子后面添加兄弟元素
            // prepend() 在盒子内部的前面添加子元素
            // appent() 在盒子内部的后面添加子元素

            $('.img-box').prepend('<img src="' + img.picAddr + '" height="70">');


            // 判断只保留 最近上传的三张图片
            if (picArr.length > 3) {
                // 删除 最后一个元素
                picArr.pop();

                // 图片容器 删除最后一个图片
                // remove(); 删除自己
                // empty(); (嗯铺体) 清空盒子内部

                // 找到隐藏的大盒子的最后一个元素,删除
                $('.img-box img:last-child').remove();
            }
            console.log(picArr);

            // 判断 如果图片个数为三张,说明数据合理,给隐藏域赋值
            if(picArr.length == 3) {
                // 把 picArrx 转成 json 字符串
                var str = JSON.stringify(picArr);

                console.log(str);
                
                $('#picArr').val(str);
                
                // 当图片删除更换完成后,并且图片为3张时,恢复图片的校验状态
                $('#addform').data('bootstrapValidator').updateStatus('picArr', 'VALID');
            }
        }
    });


    // 6. 表单非空校验
    // 使用表单校验插件
    //使用表单校验插件
    $('#addform').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [':disabled'],
    
        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
    
        //3. 指定校验字段
        fields: {
          //校验用户名，对应name表单的name属性
          brandId: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请选择二级分类'
              }
            }
          },
          // 商品名称
          proName: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请输入商品名称'
              }
            }
          },
          // 商品描述
          proDesc: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请输入商品描述'
              }
            }
          },
          // 商品尺码
          size: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请输入商品尺码'
              },
              //正则校验: 必须是xx-xx格式， x数字  23-42
              regexp: {
                regexp: /^[1-9]\d-[1-9]\d$/,
                message: '尺码 必须是xx-xx格式， x数字  '
              }
            }
          },
          // 商品库存
          num: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请输入商品库存'
              },
              //正则校验： 非0开头的数字  3
              regexp: {
                regexp: /^[1-9]\d*$/,
                message: '库存必须是 非0开头的数字'
              }
            }
          },
          // 商品原价 是整数和小数 
          oldPrice: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请输入商品原价'
              }
            }
          },
          // 商品现价 是整数和小数 
          price: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请输入商品现价'
              }
            }
          },
          //图片信息
          picArr: {
            validators: {
              //不能为空
              notEmpty: {
                message: '请上传3张图片'
              }

                }
            },

        }

    });


    // 7. 手动恢复图片和下拉列表的校验状态
    // 1. 当下拉列表选中后,恢复下拉列表的选中状态
    // 2. 当图片上传完成,并且图片为3张时,恢复图片的校验状态

    // 9, 添加商品
    // 1. 点击提交按钮,获取表单数据,在数据校验通过情况下,发送ajax请求Git后台进行添加
    // 2. 添加完成,页面重新渲染,表单重置,模态框关闭, 手动重置,图片 和 按钮的文字

    $("#addform").on('success.form.bv', function (e) {
        // 清除提交的默认刷新
        e.preventDefault();
        //使用ajax提交逻辑
        $.ajax({
            type: 'post',
            url: '/product/addProduct',
            data: $('#addform').serialize(), // 找到所有带name属性的
            dataType: 'json',
            success: function (res) {
                console.log(res);
                // 页面重新渲染
                render();
                // 表单重置: 重置表单数据和校验样式
                $("#addform").data('bootstrapValidator').resetForm(true);
                // 隐藏模态框
                $('.modal-add').modal('hide');
                // 手动重置 图片按钮的文字,恢复原来的
                $('.btn-txt').text('请选择二级分类');
                // 清空图片内部
                $('.img-box').empty();
                // 重置图片容器 picArr 
                picArr = [];
            }
        })
    });
})